<template>
  <div class="song-item" @click="toNewSong(song)">
    <el-badge
      v-if="VueXsong.id !== song.id"
      :value="index + 1"
      class="item"
      :class="{ list_item: $route.meta.songListItemControl }"
      type="primary"
    ></el-badge>
    <el-badge
      v-else
      :value="index + 1"
      class="item"
      :class="{ list_item: $route.meta.songListItemControl }"
      type="success"
    ></el-badge>
    <div class="left" v-if="song">
      <div class="play">
        <svg
          t="1648291084739"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1594"
          width="200"
          height="200"
        >
          <path
            d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m196.546667 500.493333l-266.666667 176A37.333333 37.333333 0 0 1 384 688V336.033333a37.333333 37.333333 0 0 1 57.893333-31.16l266.666667 176a37.333333 37.333333 0 0 1 0 62.32z"
            fill="#dbdbdb"
            p-id="1595"
            class="fingerCursor"
          ></path>
        </svg>
      </div>
      <img
        :src="
          (song.picUrl || song.al.picUrl || song.img1v1Url) +
          '?imageView=1&type=webp&thumbnail=246x0'
        "
        :alt="song.name || song.al.name"
      />
    </div>

    <div class="right" :class="{ long: long }">
      <p class="song-name">
        {{ song.name }}
      </p>
      <div class="singer">
        <i class="sq"></i>
        <template v-if="song.song">
          <span
            class="alias-name"
            v-for="alias of song.song.artists || song.ar"
            :key="alias.id"
          >
            {{ alias.name }}<span class="aliasLine"> /</span>
          </span>
        </template>
        <template v-eles>
          <span class="alias-name" v-for="alias of song.ar" :key="alias.id">
            {{ alias.name }}<span class="aliasLine" v-if="song.song"> /</span>
          </span>
        </template>
        <template v-if="song.song">-</template>
        <span class="album-name" v-if="song.song">{{
          song.song.album.name || song.al.name
        }}</span>
      </div>
      <el-popconfirm title="确定删除吗？" @confirm="remove(song)">
        <i
          v-if="!noDeleteSong"
          slot="reference"
          class="el-icon-remove-outline remove"
          @click.stop
        ></i>
      </el-popconfirm>
    </div>
    <div class="control" v-if="!!control">
      <svg
        class="icon add"
        t="1648697799194"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1601"
        width="200"
        height="200"
        @click.stop="add(song)"
      >
        <path
          d="M512.00494408 343.49884033c9.29937744 0 17.23425293 3.18878174 23.84417701 9.88769507 6.56048608 6.48632836 9.87780761 14.52008057 9.87780762 23.78979492v101.14617968h101.12640405c9.30432153 0 17.24414039 3.29260253 23.85406446 9.88769508C677.27282739 494.79541016 680.58520484 502.72534156 680.58520484 512c0 9.37353516-3.31237817 17.30346656-9.87780762 23.89361573-6.60992408 6.59509253-14.54974365 9.88769508-23.85406446 9.88769506H545.72692872v101.14617968c0 9.26971435-3.31237817 17.19964576-9.87780763 23.78979492-6.60992408 6.59509253-14.54479957 9.88769508-23.84417701 9.88769508-9.3092649 0-17.24414039-3.29260253-23.85406517-9.88769508-6.56048608-6.59014916-9.87780761-14.52008057-9.87780762-23.78979492V545.78131079H377.14666724c-9.30432153 0-17.23425293-3.29260253-23.84417701-9.88769506-6.57531762-6.59014916-9.87780761-14.52008057-9.87780762-23.89361573 0-9.26971435 3.30249-17.20458984 9.87780762-23.79473901 6.60992408-6.59014916 14.53985619-9.88769508 23.84417701-9.88769507h101.12640404V377.18127441c0-9.26971435 3.31237817-17.30346656 9.87780763-23.78979491 6.60992408-6.69891334 14.54479957-9.88769508 23.85406517-9.88769508m0-134.82366968c-41.08337403 0-80.39190697 8.0337522-117.84155296 24.10125733-37.45459008 15.96368432-69.72308349 37.59301734-96.76098633 64.57653809-27.05767846 27.09228492-48.61779785 59.32617188-64.65563989 96.8203125-16.05761695 37.48919654-24.07653833 76.72851586-24.10125732 117.82672142-0.02966309 41.09820557 8.02386474 80.33752417 24.10125732 117.82672072 16.05761695 37.49414063 37.61773705 69.73297095 64.65563989 96.8203125 27.00823974 26.98352075 59.25695825 48.50903297 96.76098633 64.57653809 37.49908471 16.06750512 76.78784203 24.10125732 117.84155296 24.10125732 41.04382348 0 80.33752417-8.0337522 117.8316648-24.10125732 37.51391625-16.06750512 69.75769067-37.59301734 96.76098633-64.57653809 27.03790283-27.09228492 48.59802222-59.32617188 64.66552735-96.8203125 16.06750512-37.48919654 24.12597633-76.72851586 24.09136986-117.82672072-0.01977563-41.09820557-8.04364038-80.33752417-24.09136986-117.82672142-16.04772949-37.49414063-37.60784888-69.73297095-64.66552735-96.8203125-27.02801538-26.98352075-59.30639625-48.61285376-96.76098633-64.57653809-37.44964599-16.06750512-76.75323487-24.10125732-117.8316648-24.10125733m0-67.46374487c50.39758301 0 98.45672632 9.78881836 144.18237257 29.35656691 45.72070289 19.56774926 85.13305664 45.93328857 118.24200464 78.99774193 33.09411645 33.05950928 59.42504859 72.50646949 79.00268531 118.23706054C873.00964332 413.53338623 882.78857422 461.63702416 882.78857422 512c0 50.36791992-9.77398682 98.46661377-29.35656762 144.19720483-19.57763672 45.73059106-45.90856958 85.07373047-79.00268531 118.23706055-33.11389136 33.06445336-72.52130103 59.42999268-118.24200464 79.0026853C610.46166969 872.99975586 562.4025271 882.78857422 512 882.78857422c-50.39758301 0-98.46661377-9.78881836-144.18237328-29.35656762-45.72070289-19.56774926-85.13800072-45.93328857-118.25683547-78.99774122-33.08917237-33.16333008-59.41021704-72.50646949-79.00268602-118.23706055C150.99035668 610.46661377 141.21142578 562.36297584 141.21142578 512c0-50.36791992 9.77398682-98.46661377 29.35656762-144.19720483 19.58752417-45.73059106 45.90856958-85.17755127 79.00268531-118.23706055 33.11389136-33.06445336 72.53118921-59.42999268 118.25683618-79.0026853C413.53338623 151.00024414 461.60241699 141.21142578 512 141.21142578"
          p-id="1602"
          fill="#dbdbdb"
        ></path>
      </svg>
      <svg
        class="icon like"
        t="1648282730083"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6187"
        width="200"
        height="200"
        @click.stop="like()"
      >
        <path
          d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z"
          fill=""
          p-id="6188"
          class="fingerCursor"
        ></path>
        <path
          d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z"
          :fill="return_like_color()"
          p-id="6189"
          class="fingerCursor"
        ></path>
        <!-- fill="#FF5F5F" -->
        <path
          d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
          fill="#FFFFFF"
          p-id="6190"
        ></path>
      </svg>
      <!-- <svg
        class="icon more"
        t="1648698463228"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="29199"
        width="200"
        height="200"
      >
        <path
          d="M440 112m72 0l0 0q72 0 72 72l0 0q0 72-72 72l0 0q-72 0-72-72l0 0q0-72 72-72Z"
          p-id="29200"
          fill="#dbdbdb"
        ></path>
        <path
          d="M440 440m72 0l0 0q72 0 72 72l0 0q0 72-72 72l0 0q-72 0-72-72l0 0q0-72 72-72Z"
          p-id="29201"
          fill="#dbdbdb"
        ></path>
        <path
          d="M440 768m72 0l0 0q72 0 72 72l0 0q0 72-72 72l0 0q-72 0-72-72l0 0q0-72 72-72Z"
          p-id="29202"
          fill="#dbdbdb"
        ></path>
      </svg> -->
    </div>
  </div>
</template>

<script>
import store from "../../store";
import { localStorage } from "../../request";

export default {
  name: "songItem",
  props: ["song", "index", "long", "control", "noDeleteSong"],
  data() {
    return {
      Favorite_Songs: null,
    };
  },
  computed: {
    reload_DB: function () {
      return store.state.Counter.reload_DB;
    },
    VueXsong: function () {
      return store.state.Counter.song || {};
    },
    playing_list: function () {
      return store.state.Counter.playing_list;
    },
    currentEmail: function () {
      return store.state.Counter.currentEmail;
    },
  },

  watch: {
    reload_DB: function (after, before) {
      if (after) {
        localStorage.getItem("email:" + this.currentEmail).then((res) => {
          let data = res.data.Favorite_Songs;
          this.Favorite_Songs = data;
        });
      }
    },
  },

  created() {
    localStorage.getItem("email:" + this.currentEmail).then((res) => {
      let data = res.data.Favorite_Songs;
      this.Favorite_Songs = data;
    });
  },

  mounted() {
    // console.log(this.song);
  },

  methods: {
    toNewSong(song) {
      console.log(song);
      store.commit("change_song", song);
      store.commit("change_play_state", true);
      // 加入历史播放
      localStorage.getItem("email:" + this.currentEmail).then((res) => {
        let data = res.data.Historical_Songs_List;
        let index = data.findIndex((item) => {
          return this.song.id === item.id;
        });
        if (index === -1) {
          console.log("加入历史");
          data.push(this.song);
          localStorage
            .setItem("email:" + this.currentEmail, {
              ...res,
              data: {
                ...res.data,
                Historical_Songs_List: data,
              },
            })
            .then(() => {
              store.commit("need_reload_DB", true);
            });
        } else {
          console.log("已经存在");
        }
      });
    },

    // 收藏
    like() {
      console.log("liiiiike", this.currentEmail);
      // 收藏歌曲
      localStorage.getItem("email:" + this.currentEmail).then((res) => {
        console.log(res.data.Favorite_Songs);
        let data = res.data.Favorite_Songs;
        let index = data.findIndex((item) => {
          return this.song.id === item.id;
        });
        if (index === -1) {
          data.push(this.song);
          this.Favorite_Songs = data;
          localStorage
            .setItem("email:" + this.currentEmail, {
              ...res,
              data: {
                ...res.data,
                Favorite_Songs: data,
              },
            })
            .then(() => {
              store.commit("need_reload_DB", true);
            });
        } else {
          data.splice(index, 1);
          this.Favorite_Songs = data;
          localStorage
            .setItem("email:" + this.currentEmail, {
              ...res,
              data: {
                ...res.data,
                Favorite_Songs: data,
              },
            })
            .then(() => {
              store.commit("need_reload_DB", true);
            });
        }
      });
    },

    return_like_color() {
      if (this.Favorite_Songs) {
        let index = this.Favorite_Songs.findIndex((item) => {
          return item.id === this.song.id;
        });
        return index !== -1 ? "#ff0000" : "#ffffff";
      } else {
        return "#ffffff";
      }
    },

    add(song) {
      store.commit("insert_playing_list", song);
    },

    remove(song) {
      store.commit("remove_playing_list_song", song);
      store.commit("change_playing_list_insert", true);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>